<template>
    <div>
      <el-dialog
        title="台帐设置"
        :visible.sync="dialogVisibleLedger" width="900px" v-dialogDrag
        :modal="modal" :before-close="handleCloseLedger">
        <div>
          <el-form ref="form" :model="formLedger" label-width="180px" :rules="rules" inline size="medium">
                <el-form-item label="消缺内容" prop="cont">
                  <el-input type="textarea" rows="3" v-model="formLedger.cont" placeholder="请输入" style="width:620px" maxlength="200"
  show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="缺陷描述" prop="describe">
                  <el-input type="textarea" rows="3" v-model="formLedger.describe" placeholder="请输入"  style="width:620px" maxlength="200" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="消缺情况" prop="request">
                  <el-input v-model="formLedger.request" type="textarea" rows="3" placeholder="请输入"  style="width:620px" maxlength="200" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="发现时间">
                  <el-date-picker
                    v-model="formLedger.foundTime"
                    format="yyyy年MM月dd日"
                    value-format="yyyy/MM/dd"
                    type="date"
                    disabled
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="台帐类型" prop="CATEGROY" required>
                  <el-select v-model="formLedger.CATEGROY" placeholder="请选择"  :disabled="!isLeaderPage" style="width:220px" @change="handleChangeCategroy">
                    <el-option label="监测设施" :value="1"></el-option>
                    <el-option label="在线安全" :value="2"></el-option>
                    <el-option label="巡视安全" :value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="缺陷类别" prop="tp" v-if="formLedger.CATEGROY == 1" required>
                  <el-input v-model="formLedger.tp" placeholder="请输入" style="width: 220px;"></el-input>
                </el-form-item>
                <el-form-item label="缺陷类别" prop="tp" v-if="formLedger.CATEGROY == 2">
                 <div style="width: 220px;">
                  <span> {{formLedger.tp}}</span>
                  <el-button type="primary" @click="handleSelectOnline" size="mini" style="margin-left:20px" icon="el-icon-thumb">选择</el-button>
                 </div>
                </el-form-item>
                <el-form-item label="缺陷类别" prop="tp" v-if="formLedger.CATEGROY == 3 && isLeaderPage">
                  <div style="width: 220px;">
                    <span> {{formLedger.tp}}</span>
                    <el-button type="primary" @click="handleSelectTree" size="mini" style="margin-left:20px" icon="el-icon-thumb">选择</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="缺陷类别" prop="tp" v-if="formLedger.CATEGROY == 3 && !isLeaderPage">
                  <div style="width: 220px;">
                    <span> {{formLedger.tp}}</span>
                  </div>
                </el-form-item>
                <el-form-item label="对应设备" prop="equipment">
                  <el-input v-model="formLedger.equipment" placeholder="请输入" :disabled="formLedger.CATEGROY == 2 || formLedger.CATEGROY == 3" style="width:220px"></el-input>
                </el-form-item> 
                <el-form-item label="填报人" prop="recorderName">
                  <el-input v-model="formLedger.recorderName" placeholder="请输入" disabled style="width:220px"></el-input>
                </el-form-item>
                <el-form-item label="规定消缺时间" prop="provTime">
                  <el-date-picker
                    v-model="formLedger.provTime"
                      format="yyyy年 MM 月 dd 日"
                  value-format="yyyy/MM/dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="是否重复缺陷" prop="repeat">
                  <div style="width: 220px;">
                    <el-radio-group v-model="formLedger.repeat">
                    <el-radio :label="1">
                        <el-tag type="danger" size="small">是</el-tag>
                    </el-radio>
                    <el-radio :label="0">
                        <el-tag type="success" size="small">否</el-tag>
                    </el-radio>
                  </el-radio-group>
                  </div>
                </el-form-item>
                <el-form-item label="指派人">
                  <el-select v-model="formLedger.Processor" placeholder="请选择">
                    <el-option
                      v-for="item in userList"
                      :key="item.id"
                      :label="item.userTrueName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
        </div>
        <div class="dialog-footer">
           <el-button size="small" @click="handleCloseLedger" icon="el-icon-circle-close" class="cancel-btn">取消</el-button>
            <el-button type="primary" size="small" @click="handleSaveLedger" icon="el-icon-circle-check" class="confirm-btn">保存配置</el-button>
        </div>
    </el-dialog>

    <el-dialog
            title="巡视列表"
            :visible.sync="dialogVisibleXS"
            width="600px"
          >
            <div>
              <el-form  label-width="100px" size="small">
                <el-form-item label="巡视类型">
                  <el-select v-model="inspectionSelectVal" placeholder="请选择"  @change="handleChangeInspection">
                    <el-option
                      v-for="item in inspectionSelect"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="巡视目录">
                  <div style="height: 360px;overflow: auto;">
                      <treeMenu :treeData="inspectionTree" name="lable" @menuLeftClick="handleInspectionClick"/>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div class="dialog-footer">
              <el-button @click="dialogVisibleXS = false" size="small" icon="el-icon-circle-close" class="cancel-btn">取消</el-button>
              <el-button type="primary" @click="handleConfirmXS" size="small" icon="el-icon-circle-check" class="confirm-btn">确定</el-button>
            </div>
          </el-dialog>

          <el-dialog
            title="在线安全"
            :visible.sync="dialogOnlineVisible"
            width="600px"
          >
            <div>
              <el-form  label-width="100px" >
                <el-form-item label="目录">
                  <div style="height: 400px;overflow: auto;">
                    <treeMenu :treeData="OnlineTree" name="indeX_NAME" @menuLeftClick="handleOnlineClick"/>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div class="dialog-footer">
              <el-button @click="dialogOnlineVisible = false" size="small" icon="el-icon-circle-close" class="cancel-btn">取消</el-button>
              <el-button type="primary" @click="handleConfirmOnline" size="small" icon="el-icon-circle-check" class="confirm-btn">确 定</el-button>
            </div>
          </el-dialog>
    </div>
</template>
<script>
import {GetORGUser,sysLeaderAdd,getInspectionTempsnew,inspectionDataGetTree,scuRmIndexList } from '@/api/https'
import treeMenu from '@/components/base/treeMenu.vue'
export default ({
   components:{treeMenu},
    props:{
        visible:{
            type:Boolean,
            default:false
        },
        accountData:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        formLedger:{
          type:Object,
            default:()=>{
                return {}
            }
        },
        modal:{
          type:Boolean,
          default:true
        },
        isLeaderPage:{
          type:Boolean,
          default:false
        }
    },
    watch: {
        visible(newVal) {
            this.dialogVisibleLedger = newVal
            if(newVal){
                this.onGetAccountData()
            }
        },
        dialogVisibleLedger(newVal) {
            this.$emit('update:visible', newVal)
        }
    },
    data() {
        return {
            dialogVisibleLedger:this.visible,
            rules:{
                cont:[{ required: true, message: '请输入消缺内容' }],
                describe: [{ required: true, message: '请输入缺陷描述' }],
                provTime: [{ required: true, message: '请选择时间' }],
                repeat: [{ required: true, message: '请选择是否重复缺陷' }],
                CATEGROY: [{ required: true, message: '请选择台帐类型' }],
                tp: [{ required: true, message: '请选择缺陷类别' }],
            },
            userList:[],
            inspectionSelect:[],
            inspectionSelectVal:'',
            dialogVisibleXS:false,
            inspectionTree:[],
            inspectionID:'',
            parentInspectionName:'',
            inspectionName:'',
            OnlineTreeName:'',
            dialogOnlineVisible:false,
            OnlineTree:[]
        }  
    },
    mounted(){
        
    },
    methods:{
        onGetAccountData(){
            GetORGUser().then(res=>{
                if(res.isSuccess && res.data.length > 0){
                    this.userList = res.data
                }
            })
            this.dialogVisibleLedger = true
        },
        handleCloseLedger(){
            this.dialogVisibleLedger = false
            this.$emit('handleCloseLedger')
        },
        handleSaveLedger(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                  if(this.isLeaderPage){
                    this.$emit('handleSaveLedger')
                  }else{
                    const data = {}
                    if(this.formLedger.Processor){
                        data.sys_Ledger_Process = {
                            ID: 0,
                            assigner: 0,
                            Processor: this.formLedger.Processor,
                            ProcessTime: "",
                            LedgerID: 0
                        }
                    }else{
                        data.sys_Ledger_Process = {}
                    }
                    const _d = {...this.formLedger}
                    _d.equipment = this.formLedger.equipment || ''
                    delete _d.Processor
                    data.sys_Ledger = {..._d}
                    sysLeaderAdd(data).then(res=>{
                        if(res.isSuccess){
                            this.handleCloseLedger()
                            this.$message.success('已成功生成台帐！')
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                  }
                } else {
                    return false;
                }
            });
        },
        handleSelectTree(){
            getInspectionTempsnew().then(res=>{
                if(res.isSuccess){
                    if( res.data &&  res.data.length > 0){
                        this.inspectionSelect = res.data
                        this.inspectionSelectVal = res.data[0].id
                        this.handleGetInspectionTree()
                        this.dialogVisibleXS = true
                    }else{
                        this.inspectionTree = []
                    }
                }
            })
        },
        handleChangeInspection(val){
            this.inspectionSelectVal = val
            this.handleGetInspectionTree()
        },
        handleGetInspectionTree(){
            inspectionDataGetTree({
                StationID:sessionStorage.getItem("stationId") || '',
                InspectionTypeID:this.inspectionSelectVal
            }).then(res=>{
                if(res.isSuccess){
                    this.inspectionTree = res.data || []
                }else {
                    this.inspectionTree = []
                }
            })
        },
        handleInspectionClick(data,node){
          this.inspectionID = data.treeID
          const parent = node.parent;
          if(parent){
            this.parentInspectionName = parent.data.node.treeName
            this.inspectionName = data.treeName
          }
        },
        handleConfirmXS(){
            const len = this.inspectionID.toString().replace('.', '').length
            if(this.inspectionID != '' && len >= 5){
                this.formLedger.tp =  `${this.parentInspectionName}[${this.inspectionName}]`
                this.dialogVisibleXS = false
                this.parentInspectionName = ''
                this.inspectionName =''
                this.inspectionID = ''
            }else{
                this.$message.error('未选择目录，或者该目录不是最底层')
            }
        },
        handleSelectOnline(){
            scuRmIndexList({
                STATION_ID:sessionStorage.getItem("stationId") || '',
                CATALOG:0
            }).then(res=>{
                if(res.isSuccess && res.data){
                    this.OnlineTree = res.data || []
                }
                this.dialogOnlineVisible = true
            })
        },
        handleOnlineClick(data){
            this.OnlineTreeName = data.indeX_NAME
        },
        handleConfirmOnline(){
            if(this.OnlineTreeName != ''){
                this.formLedger.tp =  this.OnlineTreeName
                this.dialogOnlineVisible = false
                this.OnlineTreeName = ''
            }else{
                this.$message.error('请选择目录')
            }
        },
        handleChangeCategroy(val){
          this.$emit('changeCategroy')
        }
    }
})
</script>
<style scoped>
</style>
